const path = require('path');
const miniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');   
const webpack=require('webpack');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');

module.exports ={
    mode:  'development',//'production',
    entry:  {
        'x-ui': './index.js',
        'input/input': './src/input/input.js',
        'kit/kit': "./src/kit/kit.js"
    },
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: '[name].js', 
        libraryTarget: 'umd',
        //globalObject: 'this',
        libraryExport: 'default',
    },
    externals: {
        /*
        'lodash': {
            commonjs: 'lodash',
            commonjs2: 'lodash',
            amd: 'lodash',
            root: '_'
        }
        */
    },
    devtool: 'source-map',
    module: {
        rules: [
            
            {
                test: /\.(js)$/,
                exclude: /(node_modules|bower_components)/,
                use: 'babel-loader'
            },
            {
                test: /\.less$/,
                use:[
                    {
                        loader: miniCssExtractPlugin.loader
                    },
                    {
                        loader: "css-loader",
                        options: {
                            sourceMap: true,
                        },
                    },
                    {
                        loader: "less-loader",
                        options: {
                            sourceMap: true,
                        }
                    }
                ]
            }, 
            {
                test: /\.css$/,
                use: [
                    {
                        loader: miniCssExtractPlugin.loader
                    },
                    {
                        loader: 'style-loader'  // 可以把css放在页面上
                    },
                    {
                        loader: 'css-loader'    // 放在后面的先被解析
                    }
               ]
            }, 
           
        ]
    },
    resolve: {
        extensions: ['.less']
    },
    devServer:{
        host:'localhost',   //服务器的ip地址
        port:3000,  //端口
        open:true,  //自动打开页面
        hot:true,   //开启热更新
    },
    plugins:[
       
        //这里会按照output的路径打包到css文件夹下面对应的css的名字
       // new ExtractTextPlugin('css/[name].css')
       new miniCssExtractPlugin({
            filename: "[name].css",////都提到build目录下的css目录中
            chunkFilename: "[id].css"
        }),

        //处理html
        new HtmlWebpackPlugin({
            chunks:['input/input'],
            filename:'input/input.html',
            template: './src/input/input.html' //模板地址
            ,inject: true
            /*
            ,minify:{
                collapseWhitespace:true //折叠空白区域 也就是压缩代码
            },
            */
        }),

        //处理html
        // new HtmlWebpackPlugin({
        //     chunks:['layout/layout'],
        //     filename:'layout/layout.html',
        //     template: './src/layout/layout.html' //模板地址
        //     ,inject: true
        //     /*
        //     ,minify:{
        //         collapseWhitespace:true //折叠空白区域 也就是压缩代码
        //     },
        //     */
        // }),
        new webpack.HotModuleReplacementPlugin(),
        //new UglifyJsPlugin()

    ],

    optimization: {
        minimizer: [
            new OptimizeCSSAssetsPlugin({}),
            new UglifyJsPlugin({  
                uglifyOptions:({ 
                    eama: 6, 
                    cache: true, 
                    parallel: true  
                })
            })
        ],
      },

};
